<%--
  Created by IntelliJ IDEA.
  User: 19734
  Date: 2020/10/12
  Time: 20:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <%--导入easyui核心的css--%>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <%--导入easyui图标及css--%>
    <link rel="stylesheet" href="easyui/themes/icon.css">
    <%--导入基本默认css样式--%>
    <link rel="stylesheet" href="easyui/themes/demo.css">
    <%--导入jq依赖的js文件--%>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <%--导入easyui核心js--%>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <%--导入sessio超时的js--%>
    <script type="text/javascript" src="js/sessionOut.js"></script>
     <script type="text/javascript">
         $(function () {
             /*给树形添加事件*/
             $('#tt').tree({
                 onClick: function(node){
                     console.log(node);
                     /*node表示的是一条数据*/
                     //判断当前节点是否有空的url
                     if (node.url==""||node.url==null){
                         return;
                     }
                     //node:当前点击的节点对象  node.text点击节点的文本值
                     //判断当前选项卡是否存在
                     var flag = $('#tab').tabs('exists',node.text);
                     if (flag){
                         //直接选中指定的选项卡
                         $('#tab').tabs('select',node.text);
                     }else{
                         //新建选项卡面板  node节点对象默认属性为id,text,state
                         $('#tab').tabs('add',{
                             title:node.text,/*选项卡的标题*/
                             /*当前窗前打开其他网页*/
                             /*当前页面嵌套另一网页*/
                             content:'<iframe src="'+node.url+'" width="100%" height="100%"></iframe>',/*选项卡的内容*/
                             closable:true/*定义是否有×把图表*/
                         });
                     }
                 }
             });
         })

     </script>
</head>
<%--class:增加easyui 的样式
    data-options:增加easyui 的组件
--%>
<body class="easyui-layout">
<%--创建布局--%>
    <div data-options="region:'north',split:false" style="height:100px;
    /*背景图,不重复,位置,背景色*/
    background-repeat: no-repeat;background-position: center;background-color: RGB(32,71,136)">

        <div style="margin-top: 30px;margin-left: 80px">
            <span style="font-size: 35px;font-family: 楷体;color: #f3f3f3;font-style: italic">Ting 域后台系统</span>
        </div>
        <div style="float: right">
                <span style="font-size:16px;font-family: 楷体;color: #f3f3f3;">欢迎${sessionScope.admin.aname}|
                    <a href="admin/adminLoginOut" style="font-size:16px;font-family: 楷体;color: #f3f3f3;text-decoration: none">退出</a>
                </span>
        </div>

    </div>

     <div data-options="region:'west',split:true" style="width:200px;">
        <%--分类   "easyui-accordion"  属性作为组件放在data-options中  fit选项卡的大小占满容器大小--%>
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="菜单">
                <%--树形标签  异步树--%>
                    <ul id="tt" class="easyui-tree"
                        url="menu/findMoreMenu">
                    </ul>
            </div>
            <div title="备忘录">
                <h3>[1]XXX事情谈判</h3>
                <h3>[2]XXX事情谈判</h3>
                <h3>[3]XXX事情谈判</h3>
            </div>
            <div title="日历">
                <div class="easyui-calendar" style="width:194px;height:250px;"></div>
            </div>
        </div>
</div>
    <div data-options="region:'center'" style="background:#eee;">
        <%--easyui-tabs 选项卡,在中心位置显示窗口    iconCls图像集--%>
            <div id="tab" class="easyui-tabs" data-options="fit:true">
                <div title="默认页" style="background-image: url('imgs/bbj.jpg');
                    background-repeat: no-repeat;
                    background-position: center">
                </div>
            </div>
    </div>
</body>
</html>
